<include file="header"/>
<div class="wraper clearfix">
    <div class="banner clearfix">
        <div id="wrapper">
            <div id="scroller">
                <ul id="thelist">
                	<volist name="data['img']" id="vo">
                    <li><p></p><a href="#"><img src="{BEESCRM:$vo['image']}"/></a></li>
                    </volist>
                </ul>
            </div>
        </div>
		<if condition="(($data['img']) && (count($data['img']) gt 1))">
	        <div id="nav">
	            <div id="prev" onclick="myScroll.scrollToPage('prev', 0,400,3);return false">&larr; prev</div>
	            <ul id="indicator">
	            	<volist name="data['img']" id="vo">
	                <li <if condition="$i eq 1">class="active" </if> >{BEESCRM:$i}</li>
	                </volist>
	            </ul>
	            <div id="next" onclick="myScroll.scrollToPage('next', 0,400,3);return false">next &rarr;</div>
	        </div>
        </if>
    </div>
    <div class="product-detail-info">
        <div class="clearfix">
            <p class="product-name" style="width: 100%;border-right: none">{BEESCRM:$data['goods_name']}</p>
        </div>
        <div class="prize">
            <p class="new-prize">￥{BEESCRM:$data['goods_price']}</p>
            <p><span class="old-prize">￥{BEESCRM:$data['goods_original_price']}</span><span class="sale pull-right">已售{BEESCRM:$data['sale_num']}</span></p>
        </div>
    </div>
    <!--<a class="specifications">请选择商品规格<span class="iconfont icon-you pull-right"></span></a>-->
    <div class="tab-box">
        <ul class="tab clearfix">
            <li class="tab-list active">图文详情</li>
            <li class="tab-list">产品参数</li>
            <li class="tab-list">用户评价</li>
        </ul>
        <div class="container clearfix actived">
            {BEESCRM:$data['content']}
        </div>
        <div class="container clearfix">
            后台编辑文章
        </div>
        <div class="container comment">
        	<if condition="$data['comment']">
	        	<volist name="data['comment']" id="vo">
		            <div class="comment-list">
		                <div class="comment-info">
		                    <div class="user-photo"><img src="{BEESCRM:$vo.headimgurl|default='/assets/base/jiujiajiu/images/headimg.jpg'}"/></div>
		                    <p class="user-name">{BEESCRM:$vo['nickname']|default="匿名用户"}</p>
		                    <div class="start">
		                    	<for start="0" end="$vo['goods_star']">
		                        <span class="iconfont icon-3"></span>
		                        </for>
		                      <!--   <for start="0" end="$vo['over_star']">
		                        <span class="iconfont icon-shoucang"></span>
		                        </for> -->
		                    </div>
		                </div>
		                <p class="comment-text">{BEESCRM:$vo['goods_comment']}</p>
		                <p class="time"><if condition="$vo['goods_comment_time'] neq 0">{BEESCRM:$vo['goods_comment_time']|date="Y-m-d H:i:s",###}</if></p>
		            </div>
	            </volist>
	       <else/>
	       		<p></p>
	            <div class="comment-list" style="border-top: none">
		            <div class="comment-info">
		            	<p>暂无评论</p>
		            	<p></p>
		        	</div>
		        </div>
		        <p></p>
	        </if>
        </div>
    </div>
</div>
<div class="detail-menu">
    <a href="{BEESCRM::U('store/store/cart',array('did'=>$did,'origin'=>$origin))}" class="white-btn"><span class="iconfont icon-gouwu"></span><p>购物车</p><span class="circle"></span></a>
    <a href="javascript:void(0)" class="buy" data-type="buy" style="width: 80%;">立即购买</a>
</div>
<a href="#" class="back-to-top"><span class="iconfont icon-fanhuidingbu"></span><p>顶部</p></a>
<div class="pop-box" id="cover"></div>
<div class="pop" id="shopping">
    <div class="pop-product-info">
        <div class="product-img"><img src="{BEESCRM:$data.goods_thumb}"></div>
        <div class="product-text">
            <p>{BEESCRM:$data['goods_name']}</p>
            <p class="new-prize" id="single-price">￥{BEESCRM:$data['goods_price']}</p>
        </div>
        <span class="iconfont icon-guanbi close"></span>
    </div>
    <volist name="array" id="vo">
    <p class="classify">{BEESCRM:$vo['spec_name']}</p>
    <p class="norms clearfix">
    	<volist name="vo['list']" id="v">
        <span class="norms-list" data-name="{BEESCRM:$vo['spec_name']}" data-value="{BEESCRM:$v}">{BEESCRM:$v}</span>
        </volist>
    </p>
    </volist>
    <!-- 
    
    
    <p class="classify">大小</p>
    <p class="norms clearfix">
        <span class="norms-list" data-name="size" data-value="180">180</span>
        <span class="norms-list" data-name="size" data-value="190">190</span>
    </p>
    <p class="classify">重量</p>
    <p class="norms clearfix">
        <span class="norms-list" data-name="weight" data-value="10g">10g</span>
        <span class="norms-list" data-name="weight" data-value="20g">20g</span>
    </p> -->
    <p class="classify">数量</p>
    <div class="classify-box clearfix">
        <div class="quantity pull-left">
            <span class="iconfont icon-iconfont55" data-status="sub"></span>
            <input type="number" value="1" id="buy-num" data-status="input" autocomplete="on">
            <span class="iconfont icon-jia" data-status="plus"></span>
        </div>
        <span class="stock pull-left" id="product-stock">库存：{BEESCRM:$data['stock']}件</span>
    </div>
    <a href="javascript:void(0);" class="confirm" data-id="{BEESCRM:$data['goods_id']}">确认</a>
</div>
<include file="commonJs" />

<script type="text/javascript">
    var myScroll;
    function loaded() {
        myScroll = new iScroll('wrapper', {
            snap: true,
            momentum: false,
            hScrollbar: false,
            onScrollEnd: function () {
                document.querySelector('#indicator > li.active').className = '';
                document.querySelector('#indicator > li:nth-child(' + (this.currPageX + 1) + ')').className = 'active';
            },
            vScroll: false,
            onBeforeScrollStart: function (e) {
                if (this.options.hasTouch) {
                    point = e.touches[0];
                    pointStartX = point.pageX;
                    pointStartY = point.pageY;
                }
            },
            onBeforeScrollMove: function (e) {
                if (this.options.hasTouch) {
                    var point = e.touches[0];
                    deltaX = Math.abs(point.pageX - pointStartX);
                    deltaY = Math.abs(point.pageY - pointStartY);
                    if (deltaX >= deltaY) {
                        e.preventDefault();
                    }
                }
            }
        });
    }
    document.addEventListener('DOMContentLoaded', loaded, false);

    var count = document.getElementById("thelist").getElementsByTagName("img").length;
    for (i = 0; i < count; i++) {
        document.getElementById("thelist").getElementsByTagName("img").item(i).style.cssText = " width:" + document.body.clientWidth + "px";
    }
    document.getElementById("scroller").style.cssText = " width:" + document.body.clientWidth * count + "px";
    setInterval(function () {
        myScroll.scrollToPage('next', 0, 400, count);
    }, 3500);
    window.onresize = function () {
        for (i = 0; i < count; i++) {
            document.getElementById("thelist").getElementsByTagName("img").item(i).style.cssText = " width:" + document.body.clientWidth + "px";
        }
        document.getElementById("scroller").style.cssText = " width:" + document.body.clientWidth * count + "px";
    };
    
    
    $('.tab').on('click','li',function(){
        var idx = $(this).index();
        $(this).addClass('active').siblings().removeClass('active');
        $('.container').eq(idx).addClass('actived').siblings().removeClass('actived');
    });
    $('.shopping-car').click(function(){
        $('#cover').show();
        $('#shopping').addClass('up');
    });
    $('.buy').click(function(){
        $('#cover').show();
        $('#shopping').addClass('up');
    });
    $('.close').click(function(){
        $('#shopping').removeClass('up');
        $('#cover').fadeOut(500);
    });
    $('.norms').on('click','.norms-list',function(){
        $(this).addClass('checked').siblings().removeClass('checked');
    });

    $(function () {
    	var goods_id=$('#goods_id').val();
        $.get("{BEESCRM::U('store/store/getgoodsspec',array('did'=>$did,'origin'=>$origin))}/goods_id/"+goods_id, function (res) {
            var data = $.parseJSON(res),
            		buyData=data.data,
                    elem = $('#shopping'),
                    buyLocalhData = {},
                    specId,
                    canBuy = true,
                    categoryLen,
                    typeData;
                    if(buyData.length>0){
                    	categoryLen = Object.keys(buyData[0].spec).length;
                    }else{
                    	categoryLen = 0;
                    }
//            $('#buy-num').val(1);
            if(data.status === 'S') {
                elem.on('click', '.norms-list', function () {
                    var name = $(this).data('name');
                    var vals = $(this).data('value').toString();
                    if(buyData.length>0){
                    	
//                      过滤选中的规格与数据，与之匹配
                        buyLocalhData[name] = vals;
                        var filterBuyData = buyData.filter(function (v, i) {
                            if(_.isEqual(v.spec, buyLocalhData)) {
                                return v;
                            }
                        });
                        
                        if(filterBuyData.length > 0) {
                            $('#single-price').text('￥' + filterBuyData[0].price);
                            if(!+filterBuyData[0].stock) {
                                $('#product-stock').text('暂无库存');
                                canBuy = false;
                            } else {
                                $('#product-stock').text('库存：'+ filterBuyData[0].stock +'件');
                                canBuy = true;
                            }
                            specId = filterBuyData[0].goods_spec_id;
                        }
                    }
                });

                elem.on('click', '.confirm', function () {
                    if(Object.keys(buyLocalhData).length < categoryLen) {
                        $.alert('error','请选择规格！');
                        return false;
                    }

                    if(!canBuy) {
                        $.alert('error','暂无库存！');
                        return false;
                    }

                    $.getAjax({
                        url: "{BEESCRM::U('store/store/addtocart',array('did'=>$did,'origin'=>$origin))}",
                        method: 'POST',
                        data: {
                            goods_id: $(this).data('id'),
                            goods_spec_id:specId,
                            goods_num:$('#buy-num').val(),
                            type:typeData
                        }
                    },true, function (res) {
                        if(typeData == 'buy') {
                            location.href = res.url;
                        }
                        $('#shopping').removeClass('up');
                        $('#cover').fadeOut(500);
                    });

                });

                $('.detail-menu').on('click','.shopping-car,.buy', function () {
                    typeData = $(this).data('type');
                });
                $('.quantity').changeAmount();
            }
        });

    });

</script>